<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>产品/案例4</title>
    <script src="../js/jquery-3.5.1.min.js"></script>
    <script src="../js/bootstrap4.5.min.js"></script>
    <link rel="stylesheet" href="../css/bootstrap4.5.min.css">
    <link rel="stylesheet" href="../css/public.css">
    <style>
        .product_list_box ul{
            display: flex;
            justify-content: space-between;
            /* 把容器变大40px并靠左20px */
            width: calc(100% + 40px);
            transform: translateX(-20px);
            /* margin: auto -20px; */
        }
        .product_list_box ul li{
            flex: 0 0 33.33%;
            max-width: 33.33%;
            padding: 0 20px;
        }
        .product_list_box ul li .product_list_img{
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
        .product_list_img img{
            width: 100%;
            height: 100%;
        }
        .product_list_box ul li .product_list_img img:hover{
            transform: scale(1.1);
            transition:0.9s ease all;
        }
        @media (min-width:1440px) and (max-width:1455px) {
            .product_list_box ul{
                margin: 0;
            }
        }
        /* 排六个 */
        .product_list3 .product_list_box ul{
            display: flex;
            flex-wrap: wrap;
        }
        .product_list3 .product_list_box ul li{
            flex: 0 0 33.33%;
            max-width: 33.33%;
            padding-bottom:40px;
        }
        @media screen and (max-width: 768px){
            .product_list3 .product_list_box ul{
                display: flex;
                flex-wrap: wrap;
            }
            .product_list3 .product_list_box ul li{
                flex: 0 0 50%;
                max-width: 50%;
                padding-bottom: 20px;
            }
        }
    </style>
</head>
<body>
    <!-- 排6个 -->
    <div class="product_list title_left modular product_list3">
        <div class="product_list_box public_width">
            <div class="public_title">
                <h2>产品/案例</h2>
                <p>Project</p>
            </div>
            <ul>
                <li>
                    <div class="product_list_img">
                        <img src="../images/product10_1.webp" alt="">
                    </div>
                </li>
                <li>
                    <div class="product_list_img">
                        <img src="../images/product10_1.webp" alt="">
                    </div>
                </li>
                <li>
                    <div class="product_list_img">
                        <img src="../images/product10_1.webp" alt="">
                    </div>
                </li>
                <li>
                    <div class="product_list_img">
                        <img src="../images/product10_1.webp" alt="">
                    </div>
                </li>
                <li>
                    <div class="product_list_img">
                        <img src="../images/product10_1.webp" alt="">
                    </div>
                </li>
                <li>
                    <div class="product_list_img">
                        <img src="../images/product10_1.webp" alt="">
                    </div>
                </li>
            </ul>
        </div> 
    </div>
</body>
</html>